<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引入cesiumjs库 -->
    <script src="../lib/cesium/Cesium.js"></script>
    <title>Document</title>
</head>
<style>
    /* 引入cesium widget样式 */
    @import url(../lib/cesium/Widgets/widgets.css);
        html, body, #cesiumContainer {
            width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;
        }
</style>
<body>
    <!-- 地图容器 -->
    <div id="cesiumContainer"></div>
    <script src="app.js"></script>
</body>
<script>
    let viewer = new Cesium.Viewer('cesiumContainer', {
        geocoder: false, // 搜地理位置搜索工
        homeButton: false, // 返回首页按钮
        sceneModePicker: false, // 2D 3D切换按钮
        baseLayerPicker: false, // 底图切换按钮
        navigationHelpButton:false, // 帮助按钮
        animation: false, // 左下角动画面板
        timeline: false, // 时间轴
        fullscreenButton: false, // 全屏按钮
    });
    // 隐藏logo
  viewer.cesiumWidget.creditContainer.style.display = "none";
  Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJiN2ZlMWExNC04NjRlLTQzMTQtYmI2MS03M2NiN2Q0MjAwYTciLCJpZCI6ODYzNjIsImlhdCI6MTY0Nzc1NjgxNX0.UB9DEHTYlzJ-1N1XF8rH7uGEsw8W5nlMZuz-LTVizb8';

  // 添加3dtiles模型
  const airplane = viewer.entities.add({
    name: 'Airplane',
    position: Cesium.Cartesian3.fromDegrees(113.3191, 23.109, 1500),
    // orientation: {
    //   heading: Cesium.Math.toRadians(0),
    //   pitch: Cesium.Math.toRadians(-90),
    //   roll: 0
    // },
    model: {
      uri: '../model/feiji.glb',
      // 设置模型最小像素
      minimumPixelSize: 128,
      // 设置飞机的轮廓
      silhouetteSize: 2,
      // 设置轮廓颜色
      silhouetteColor: Cesium.Color.RED,
      // 设置相机距离模型多远距离显示
      distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0.0, 200000)
    }
  })

  // 添加广州塔
   const addGzTa = async () => {
    // await Cesium.createOsmBuildingsAsync();
    // viewer.scene.primitives.add(tileset);

    try {
      const tileset = await Cesium.createOsmBuildingsAsync(
      //   {
      //   style: new Cesium.Cesium3DTileStyle({
      //     color: {
      //       conditions: [
      //         ["${feature['building']} === 'hospital'", "color('#0000FF')"],
      //         ["${feature['building']} === 'school'", "color('#00FF00')"],
      //         [true, "color('#ffffff')"]
      //       ]
      //     }
      //   })
      // }
      );
      

      // tileset.allTilesLoaded.addEventListener((event) => {
      //   console.log(event, 'all')
      // })
      viewer.scene.primitives.add(tileset);

      tileset.tileVisible.addEventListener((tileset) => {
        const content = tileset.content
        const featuresLenth = content.featuresLength
        const model = content.getFeature(0).content._model
        console.log(model._rendererResources)

        // console.log(content.getFeature(0).content._model)
        // for (let i = 0; i < featuresLenth; i++) {
        //   const feature = content.getFeature(i).content._model
        //   // const id = feature.getProperty('name')
        //   // const name = feature.getProperty('name')
        //   // const height = feature.getProperty('height')
        //   // const type = feature.getProperty('building')
        //   // const color = feature.getProperty('color')
        //   // const position = feature.getProperty('position')
        //   // const bbox = feature.getProperty('bbox')
        //   // const bbox_min = bbox[0]
        //   // const bbox_max = bbox[1]
        // console.log( feature)

        // }

        // console.log(content, 'content')

      })
    } catch (error) {
      console.log(`Error creating tileset: ${error}`);
    }
   } 
   addGzTa()

  viewer.flyTo(airplane)

</script>
</html>